<template>
  <div class="z-zhengti">
    <!-- 折叠按钮组 -->
    <div class="z-anniu">
      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
        <el-radio-button :value="false">展开</el-radio-button>
        <el-radio-button :value="true">收起</el-radio-button>
      </el-radio-group>
    </div>
    <!-- 侧边菜单 -->
    <div class="z-caidan">
      <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
        @close="handleClose">
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <location />
            </el-icon>
            <span>题库管理</span>
          </template>
          <el-menu-item index="1-1" @click="activeIndex = '1-1'">题目管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <location />
            </el-icon>
            <span>学习管理</span>
          </template>
          <el-menu-item index="1-3" @click="activeIndex = '1-3'">在线课程</el-menu-item>
          <el-menu-item index="1-5" @click="activeIndex = '1-5'">学习分组</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    <!-- 内容区域 -->
    <div class="content-area">
      <!-- 新增的导航栏 -->
      <div class="navigation-bar">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/gindex' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index">
            {{ item }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 根据activeIndex显示不同的内容 -->
      <el-tree-select v-model="value" :data="data" check-strictly :render-after-expand="false" style="width: 240px"
        @change="handleTreeSelectChange" v-show="activeIndex === '1-1' || activeIndex === '2-1'" />
      <div v-if="activeIndex === '1-1'" class="content-border">
        <!-- 题目管理的内容 -->
        <el-table :data="getTableData1()" style="width: 100%" height="550" v-if="activeIndex === '1-1'">
          <el-table-column prop="name" label="课题名" width="620" />
          <el-table-column prop="zhuangtai" label="题目状态" width="400" />
        </el-table>
      </div>
      <!-- 软件二班题库的内容 -->
      <div v-else-if="activeIndex === '2-1'" class="content-border">
        <el-table :data="getTableData2()" style="width: 100%" height="550" v-if="activeIndex === '2-1'">
          <el-table-column prop="name" label="课程名" width="620" />
          <el-table-column prop="teacher" label="负责老师" width="400" />
        </el-table>
      </div>
      <div v-else-if="activeIndex === '1-3'" class="content-border" v-if="tableData.length > 0">
        <el-table :data="tableData" style="width: 100%" height="550">
          <el-table-column prop="name" label="课程名" width="620" />
          <el-table-column prop="chengji" label="成绩" width="400" />
        </el-table>
        <el-pagination v-model:current-page="currentPage2" v-model:page-size="pageSize2"
          :page-sizes="[100, 200, 300, 400]" :small="small" :disabled="disabled" :background="background"
          layout="sizes, prev, pager, next" :total="1000" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
      <div v-else-if="activeIndex === '1-5'" class="content-border">
        <el-dropdown>
          <el-button type="primary">
            前端框架应用项目开发<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>软件测试技术</el-dropdown-item>
              <el-dropdown-item>后端技术与项目开发</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-table :data="groupData" style="width: 100%">
          <el-table-column prop="groupName" label="组别" width="280"></el-table-column>
          <el-table-column prop="leaderName" label="组内成员" width="350"></el-table-column>
          <el-table-column prop="leaderNameb" label="组长姓名" width="180"></el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="{ row }">
              <el-switch v-model="row.showFullLeaderName" class="ml-2" inline-prompt
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="已加入"
                inactive-text="未加入" />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 默认内容 -->
      <div v-else>默认内容</div>
    </div>
  </div>
</template>


<script lang="ts" setup>
const value = ref(''); // 假设这是您用来绑定选择项的响应式变量
const data = ref([
  {
    label: '题库管理',
    value: '1',
    children: [
      {
        label: '题目管理',
        value: '1-1',
      },
      // 其他子选项...
    ],
  },
  {
    label: '考题负责老师',
    value: '2',
    children: [
      {
        label: '题目管理',
        value: '2-1',
      },
      // 其他子选项...
    ],
  },
]);
const groupData = ref([
  { groupName: '22软件一班第一组', leaderName: '赖明畅,谢骏,李鸿杰,张健煌,陈家豪', leaderNameb: '赖明畅', showFullLeaderName: false },
  { groupName: '22软件一班第二组', leaderName: '付炜佳,刘蔚岚,陈晓峰,梁雨桃,陶静文', leaderNameb: '梁雨桃', showFullLeaderName: false },
  { groupName: '22软件一班第三组', leaderName: '范秀容,黄敏静,黎杏莲,谢文敏,梁晓华,郑嘉怡', leaderNameb: '郑嘉怡', showFullLeaderName: false },
  { groupName: '22软件一班第四组', leaderName: '李珍妮,简缘熙,尤晓玲,陈锶桂,李婷,何宏霞', leaderNameb: '何宏霞', showFullLeaderName: false },
  { groupName: '22软件一班第五组', leaderName: '黄景楠,梁焯熙,庞添,苏展煌,佘启熙', leaderNameb: '佘启熙', showFullLeaderName: false },
  { groupName: '22软件一班第六组', leaderName: '沈冠廷,张家和,许海莹,肖倩,温邹鸿', leaderNameb: '张家和', showFullLeaderName: false },
  { groupName: '22软件一班第七组', leaderName: '欧阳志诚,梁兆尉,孔繁森,郑晓增,高炜铿', leaderNameb: '孔繁森', showFullLeaderName: true },
  { groupName: '22软件一班第八组', leaderName: '李英雪,高雅欣,董琳,符永诗,余锦琪', leaderNameb: '符永诗', showFullLeaderName: false },
  { groupName: '22软件一班第九组', leaderName: '周昶旭,黄金耀,陈子锟,麦梓健,麦伟豪,廖泽深', leaderNameb: '周昶旭', showFullLeaderName: false },
  { groupName: '22软件一班第十组', leaderName: '梁炜彤,何濠东,彭军航', leaderNameb: '彭军航', },

]);
import { ref, computed, onMounted, } from 'vue';
import useDataStore from "../stores/Data"; // 假设这是你用来获取数据的 Pinia Store

// 定义 HomeData 数组中每个对象的类型
interface IHomeDataItem {
  name: string;
  mainDesignerUserName: string;
  state: string;
  grade: string;// 添加这一行
  // 如果有其他属性，在这里继续定义
}

const dataStore = useDataStore();

onMounted(async () => {
  // 从 API 获取数据的 action
  await dataStore.getHomeData();
});

// 使用 getters 获取数据，并为其提供类型注解
const homeData = computed<IHomeDataItem[]>(() => dataStore.theHome);

// 准备表格数据
const tableData = computed(() => {
  return homeData.value.map((item: IHomeDataItem) => ({
    name: item.name,
    chengji: item.grade || '暂无成绩',
  }));
});

const getTableData1 = () => {
  if (activeIndex.value === '1-1') {
    // 返回题库管理的数据
    return homeData.value.map((item: IHomeDataItem) => ({
      name: item.name,
      zhuangtai: item.state,
    }));
  }
  return []; // 如果不是题库管理，返回空数组
};

const getTableData2 = () => {
  if (activeIndex.value === '2-1') {
    // 返回软件二班题库的数据
    return homeData.value.map((item: IHomeDataItem) => ({
      name: item.name,
      teacher: item.mainDesignerUserName,
    }));
  }
  return []; // 如果不是软件二班题库，返回空数组
};
const handleTreeSelectChange = (value: string) => {
  // 根据 value 更新 activeIndex
  if (value === '1') {
    activeIndex.value = '1-1';
  } else if (value === '2') {
    activeIndex.value = '2-1';
  }
  // 如果需要，也可以根据 oldValue 来执行其他逻辑
};


import { Location } from '@element-plus/icons-vue';

const isCollapse = ref(true);
const activeIndex = ref('1-1'); // 默认激活的菜单项
// 计算面包屑导航的项
const breadcrumbItems = computed(() => {
  switch (activeIndex.value) {
    case '1-1':
      return ['题库管理', '题目管理'];
    case '1-2':
      return ['题库管理', '题组练习'];
    case '1-3':
      return ['学习管理', '在线课程'];
    case '1-4':
      return ['学习管理', '成果展示'];
    case '1-5':
      return ['学习管理', '学习分组'];
    default:
      return [];
  }
});
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
// 定义分页相关的响应式变量
const currentPage2 = ref(1);
const pageSize2 = ref(100);
const small = ref(false);
const disabled = ref(false);
const background = ref(true);
// 分页组件的方法
const handleSizeChange = (val: number) => {
  console.log(`每页 ${val} 条`);
};
const handleCurrentChange = (val: number) => {
  console.log(`当前页: ${val}`);
};
</script>

<style scoped>
.z-zhengti {
  display: flex;
  height: 100vh;
}

.z-anniu {
  padding: 20px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
}

.z-caidan {
  position: fixed;
  left: 0;
  top: 60px;
  bottom: 0;
  width: 200px;
  background-color: #d8d6d6;
  overflow: auto;
  z-index: 999;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}

.el-menu--collapse {
  width: 64px;
}

.content-area {
  margin-left: 220px;
  /* 侧边栏宽度 + 边距 */
  padding: 20px;
  flex-grow: 1;
}

.navigation-bar {
  margin-bottom: 20px;
  height: 30px;
}

.content-border {
  border: 1px solid black;
  /* 添加边框样式 */
  padding: 20px;
  /* 添加内边距 */

}
</style>(: { type: string; })(: { type: string; })(: any)(: any)(: any)